<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 18:44:15
-->
<template>
<!-- 2. -->
  <div ref="root" style="height:150px">
    
  </div>
</template>

<script>
// 1.
import {Radar} from '@antv/g2plot'
export default {
  data(){
    return {
     
    }
  },
  methods:{
    initCharts(){
      // 3.
    const data = [
    { name: '政务服务', star: 10371 },
    { name: '公共资源交易', star: 7380 },
    { name: '医疗健康', star: 5414 },
    { name: '城乡建设', star: 8140 },
    { name: '生态环保', star: 6600 },
    ];
    const radarPlot = new Radar(this.$refs['root'], {
      data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
      xField: 'name',
      yField: 'star',
      appendPadding: [0, 10, 0, 10],
      meta: {
        star: {
          alias: 'star 数量',
          min: 0,
          nice: true,
          formatter: (v) => Number(v).toFixed(2),
        },
      },
      xAxis: {
        tickLine: null,
      },
      yAxis: {
        label: false,
        grid: {
          alternateColor: 'rgba(0, 0, 0, 0.04)',
        },
      },
      // 开启辅助点
      point: {
        size: 2,
      },
      area: {},
    });
    radarPlot.render();
    
        }
      },
    
  mounted(){
    this.initCharts()
  }
}
</script>